<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Course } from '@/types/teacher'
import { getCourseList, addCourse, DeleteCourse } from '@/api/teacher'
import { registerStudentClass } from '@/api/login'

// 表格数据
const tableData = ref<Course[]>()
const studentClass = (await registerStudentClass()).data

// 课程表单
const courseForm = ref<Course>(new Course('', '', 0, ''))

// 对话框控制
const dialogVisible = ref(false)
const dialogTitle = ref('添加课程')
const formRef = ref<FormInstance>()

// 表单规则
const rules = ref<FormRules>({
  courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
})

// 添加课程
const handleAdd = () => {
  dialogTitle.value = '添加课程'
  courseForm.value = new Course('', '', 0, '')
  dialogVisible.value = true
}

// 删除课程
const handleDelete = (row: Course) => {
  ElMessageBox.confirm('确定要删除该课程吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // TODO: 调用删除API
    DeleteCourse(row.courseName)
    ElMessage.success('删除成功')
    loadTableData()
  })
}

// 保存课程
const handleSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      // TODO: 调用保存API
      await addCourse(courseForm.value.courseName, courseForm.value.className)
      ElMessage.success('保存成功')
      dialogVisible.value = false
      loadTableData()
    }
  })
}

// 加载表格数据
const loadTableData = async () => {
  // TODO: 调用获取课程列表API
  tableData.value = (await getCourseList()).data
}

onMounted(() => {
  loadTableData()
})
</script>

<template>
  <div class="course-container">
    <!-- 操作栏 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleAdd">添加课程</el-button>
    </div>

    <!-- 课程表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="courseName" label="课程名称" />
      <el-table-column prop="teacherName" label="任课教师" />
      <el-table-column prop="nowSignInCount" label="学生数" />
      <el-table-column prop="className" label="班级" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑课程对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="50%"
      :close-on-click-modal="false"
    >
      <el-form ref="formRef" :model="courseForm" :rules="rules" label-width="100px">
        <el-form-item label="课程名称" prop="courseName">
          <el-input v-model="courseForm.courseName" />
        </el-form-item>
        <el-form-item label="课程班级" prop="ClassName">
          <el-select v-model="courseForm.className" placeholder="请选择班级" style="width: 100%">
            <el-option
              v-for="(item, index) in studentClass"
              :key="index"
              :label="item.className"
              :value="item.className"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.course-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}
</style>
